<!--
  ~ Copyright (c) 2024 Huawei Device Co., Ltd.
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no, viewport-fit=cover" />
  <title>购物车 - H5页面A</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      /* 设置根字体大小，针对高分辨率设备调整 */
      font-size: 16px;
      font-size: max(16px, min(4vw, 24px));
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      line-height: 1.6;
      min-height: 100vh;
    }

    .container {
      width: 100%;
      margin: 0 auto;
      background: white;
      padding: 1rem;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .title {
      height: 3.5rem;
      display: flex;
      font-weight: 700;
      text-align: center;
      line-height: 3.5rem;
      font-size: 1.875rem;
    }

    .title-back {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background-color: #e6e8e9;
      margin-top: 0.5rem;
      margin-right: 0.5rem;
      line-height: 2.375rem;
    }
    
    .section-margin {
      margin-top: 1.125rem;
    }

    .sub-title {
      font-size: 1.125rem;
      font-weight: 700;
      margin-bottom: 0.625rem;
    }

    .content-container {
      height: 8.375rem;
      border-radius: 1rem;
      padding: 1rem 0;
      background-color: #e6e8e9;
    }

    .content-text {
      width: 100%;
      max-height: 6.375rem;
      font-size: 1rem;
      padding: 0 1rem;
      overflow-y: auto;
      word-break: break-all;
    }

    .description .description-content {
      font-size: 1rem;
      color: rgba(0, 0, 0, 0.6);
    }

    .button {
      width: 100%;
      height: 2.5rem;
      border-radius: 1.25rem;
      font-size: 1em;
      text-align: center;
      line-height: 2.5rem;
      margin-top: 0.75rem;
      color: #fff;
      background-color: #0a59f7;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="top">
    <div class="title">
      <div class="title-text">购物车</div>
    </div>

    <div class="description section-margin">
      <div class="sub-title">演示内容</div>
      <div class="description-content">
        <span>这是一个H5页面，运行在HMRouter的WebView容器中</span><br />
        <span>协议URL：h5://shopping/cart</span><br />
      </div>
    </div>

    <div class="params-info section-margin">
      <div class="sub-title">页面参数</div>
      <div class="content-container">
        <div id="params" class="content-text">等待加载...</div>
      </div>
    </div>

    <div class="log section-margin">
      <div class="sub-title">日志展示区</div>
      <div class="content-container">
        <div id="log" class="content-text">等待加载...</div>
      </div>
    </div>
  </div>

  <div class="button-group">
    <div class="button" onclick="goToNativePage()">跳转到ArkUI页面B</div>
    <div class="button" onclick="goToH5PageB()">跳转到H5页面B（活动详情）</div>
    <div class="button" onclick="goBack()">返回上一页</div>
  </div>
</div>

<script>
  let logContainer = document.getElementById('log');

  // 日志记录函数
  function addLog(message) {
    const fontSizeLog = logContainer.getAttribute('font-size');
    const time = new Date().toLocaleTimeString();
    const logElement = document.createElement('div');
    logElement.textContent = `[${time}] ${message}`;
    logContainer.appendChild(logElement);
    logContainer.scrollTop = logContainer.scrollHeight;
  }

  // 等待HMRouter Bridge准备就绪
  window.onHMRouterReady = function (params) {
    document.getElementById('params').textContent = JSON.stringify(params, null, 2);
    addLog('HMRouter Bridge 已准备就绪');
    addLog(`接收到页面参数: ${JSON.stringify(params)}`);
    console.log('🎉 HMRouter Bridge 已准备就绪，页面参数：', params);
  };

  // 也可以通过事件监听
  window.addEventListener('hmrouterready', function (event) {
    addLog('收到 hmrouterready 事件');
    console.log('📡 收到 hmrouterready 事件:', event.detail);
  });

  // 跳转到ArkUI页面B
  function goToNativePage() {
    if (window.HMRouterBridge) {
      const params = {
        from: 'h5_cart',
        timestamp: Date.now(),
        cartTotal: 337.0,
      };
      addLog(`准备跳转到ArkUI页面B，参数: ${JSON.stringify(params)}`);
      window.HMRouterBridge.push('NativePageB', params);
    } else {
      addLog('❌ HMRouter Bridge 未准备就绪');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 跳转到H5页面B
  function goToH5PageB() {
    if (window.HMRouterBridge) {
      const params = {
        productId: '12345',
        from: 'cart',
        recommendedItems: ['item1', 'item2', 'item3'],
      };
      addLog(`准备跳转到H5页面B，参数: ${JSON.stringify(params)}`);
      window.HMRouterBridge.push('h5://event/detail', params);
    } else {
      addLog('❌ HMRouter Bridge 未准备就绪');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 返回上一页
  function goBack() {
    if (window.HMRouterBridge) {
      addLog('准备返回上一页');
      window.HMRouterBridge.pop();
    } else {
      addLog('❌ HMRouter Bridge 未准备就绪');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 获取参数的示例
  function getCurrentParams() {
    if (window.HMRouterBridge) {
      const params = window.HMRouterBridge.getParams();
      addLog(`当前页面参数: ${JSON.stringify(params)}`);
      return params;
    } else {
      addLog('❌ HMRouter Bridge 未准备就绪');
      return {};
    }
  }

  // 页面加载完成
  document.addEventListener('DOMContentLoaded', function () {
    addLog('📄 页面DOM加载完成');
  });

  // 页面可见性改变
  document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'visible') {
      addLog('👁️ 页面变为可见');
    } else {
      addLog('🙈 页面变为隐藏');
    }
  });

  // 错误处理
  window.addEventListener('error', function (e) {
    addLog(`❌ JavaScript错误: ${e.message}`);
    console.error('JavaScript错误:', e);
  });

  // 初始化日志
  addLog('🚀 购物车页面开始初始化');
</script>
</body>
</html>
